<template>
  <div class="home-body" id="home-page">
    <div></div>
    <div class="home-first-title active">{{ $t('message.index.commonlyUsedLib') }}</div>
    <div class="common-use-box">
      <!-- 这里进入的是全部文库列表页 -->
      <div v-for="(item, index) in knowList" :key="index" class="common-item" @click="openKnow(item)">
        <div :class="['lable', item.shareRole === 'user' && 'user', item.shareRole === 'register' && 'register']">
          {{ item.shareRole === 'register' ? $t('message.typeMenu.enterprise') : item.shareRole ===
            'user' ? $t('message.typeMenu.private') : $t('message.typeMenu.wholeNetwork')}}</div>
        <div class="know-cover">
          <img :src="item.color ? item.color : '/jvs-public/img/风景/a4.png'">
          <!-- <div class="know-set">
            <div class="know-set-item" @click="chagneTop(item)">
              <svg class="set-icon">
                <use xlink:href="#keowledge-zhiding"></use>
              </svg>
              <div>{{item.isTopping?'取消':'置顶'}}</div>
            </div>
            <div class="know-set-item" @click="delKnow(item)">
              <svg class="set-icon">
                <use xlink:href="#keowledge-shanchu"></use>
              </svg>
              <div>删除</div>
            </div>
            <div class="know-set-item" @click="downLoadKnow(item)">
              <svg class="set-icon">
                <use xlink:href="#keowledge-xiazai"></use>
              </svg>
              <div>下载</div>
            </div>
            <div class="know-set-item" @click="openSet(item)">
              <svg class="set-icon">
                <use xlink:href="#keowledge-shezhi"></use>
              </svg>
              <div>设置</div>
            </div>
          </div> -->
        </div>
        <div v-tooltip-auto-show>
          <el-tooltip :content="item.name" effect="light">
            <div class="know-name">{{ item.name }}</div>
          </el-tooltip>
        </div>
        <!-- <div v-tooltip-auto-show>
          <el-tooltip :content="item.description"> -->
        <div class="know-desc" :title="item.description">{{ item.description }}</div>
        <!-- </el-tooltip>
        </div> -->
      </div>
      <jvs-empty v-if="knowList.length == 0" size="168px" textSize="14px" textMarginTop="0rem"
        imgSrc="@/assets/images/common/noKnow.png" :text="$t('message.empty.index')">
        <el-button type="primary" @click="createdKnowledge" style="margin-top:12px">
          <svg class="add-icon">
            <use xlink:href="#keowledge-xinjian"></use>
          </svg>{{ $t('message.buttons.newLib') }}
        </el-button>
      </jvs-empty>
    </div>
    <div class="types-box">
      <div class="types-left">
        <div v-for="(item, index) in typeList" :key="index" :class="['type-left', currentActive == item.value && 'active']"
          @click="typeChange(item)">
          {{ $t(item.label) }}
        </div>
      </div>
      <div class="types-right">
        <el-dropdown trigger="click" @command="handleClick">
          <span class="el-dropdown-link">
            {{ $t('message.index.fileType') }}
            <svg class="icon">
              <use xlink:href="#keowledge-xiala"></use>
            </svg>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(item, index) in fileTypeList" :key="index" :command="item.value">
                <div class="icon-box">
                  <svg class="icon" v-if="fileType == item.value">
                    <use xlink:href="#keowledge-xuanzhong"></use>
                  </svg>
                </div>
                <span>{{ $t(item.label) }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div class="view-type-box">
          <el-tooltip :content="$t('message.tooltips.listView')" effect="light">
            <svg class="icon" :class="[showType == 'list' && 'active']" @click="changeViewType('list')"
              style="margin-left:0px;">
              <use xlink:href="#keowledge-liebiaoshitu"></use>
            </svg>
          </el-tooltip>
          <el-tooltip :content="$t('message.tooltips.titleView')" effect="light">
            <svg class="icon" :class="[showType == 'map' && 'active']" @click="changeViewType('map')">
              <use xlink:href="#keowledge-pingpushitu"></use>
            </svg>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="file-list-box" v-loading="listsLoading"
      :style="{ height: showType == 'list' ? ' calc(100% - 382px)' : 'calc(100% - 342px)' }">
      <template v-if="showType == 'list'">
        <div class="lists-item lists-header">
          <div class="item-name">
            {{ $t('message.index.fileName') }}
            <svg class="sort-icon" @click="changeSort('dcName')">
              <use v-bind:xlink:href="`#${nameSort == 'desc' ? 'keowledge-a-paixu-jiangxu1' : 'keowledge-paixu-shengxu'}`">
              </use>
            </svg>
          </div>
          <div class="item-author">
            {{ $t('message.index.createBy') }}
          </div>
          <div class="item-time">
            {{ $t('message.index.storageLoaction') }}
          </div>
          <div class="item-time">
            {{ $t('message.index.recentPreViews') }}
          </div>
        </div>
      </template>
      <el-scrollbar v-if="lists.length != 0" ref="listScrollBar">
        <template v-if="showType == 'map'">
          <div v-for="(item, index) in lists" :key="index" class="list-item" :title="item.dcName"
            @click="openFile(item)">
            <!--11 15 20 15-->
            <img src="../../assets/images/fileItemBox1.png">
            <fileRPng class="file-icon" :type="item.type" :nameSuffix="item.nameSuffix" :id="`file-icon-${index}`"
              @load="imgLoadSuccess(index)"></fileRPng>
            <!-- <img class="file-icon" :src="require(`../../assets/images/home/${getRPng(item.type,item.nameSuffix)}.png`)" :id="`file-icon-${index}`" @load="imgLoadSuccess(index)"> -->
            <!-- :style="{'box-shadow':`${getRaba(getRPng(item.type,item.nameSuffix))}`}" -->
            <div class="time-name-box">
              <div class="time">{{ $dayjs(item.createTime).format('YYYY.MM.DD HH:mm') }}</div>
              <div class="name">
                <span>{{ item.dcName }}</span>
              </div>
            </div>
          </div>
        </template>
        <template v-if="showType == 'list'">
          <div v-for="(item, index) in lists" :key="index" class="lists-item lists-items" @click="openFile(item)">
            <div class="item-name" v-tooltip-auto-show>
              <svg class="file-icon">
                <use v-bind:xlink:href="getIcon(item.type, item.nameSuffix)"></use>
              </svg>
              <el-tooltip :content="item.dcName" effect="light">
                <span>{{ item.dcName }}</span>
              </el-tooltip>
            </div>
            <div class="item-author" v-tooltip-auto-show>
              <el-tooltip :content="item.userName" effect="light">
                <span>{{ item.userName }}</span>
              </el-tooltip>
            </div>
            <div class="item-time" v-tooltip-auto-show>
              <el-tooltip :content="item.knowledgeName" effect="light">
                <span>{{ item.knowledgeName }}</span>
              </el-tooltip>
            </div>
            <div class="item-time" v-tooltip-auto-show>
              <el-tooltip :content="item.createTime" effect="light">
                <span>{{ item.createTime }}</span>
              </el-tooltip>
            </div>
            <div class="bottom-line"></div>
          </div>
        </template>
      </el-scrollbar>
      <jvs-empty v-if="lists.length == 0"></jvs-empty>
    </div>

    <!-- <el-table :data="lists" style="width: 100%" v-if="showType=='list'" height="calc(100vh - 415px)" @row-click="rowClick" v-loading="listsLoading">
      <el-table-column prop="dcName" label="文件名称"  sortable>
        <template #default="scope">
          <div class="dc-name" @click="openFile(scope.row)">
            <svg class="file-icon">
              <use v-bind:xlink:href="getIcon(scope.row.type,scope.row.nameSuffix)"></use>
            </svg>
            <span>{{scope.row.dcName}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="创建者" width="200"/>
      <el-table-column prop="knowledgeName" label="储存位置" width="230"/>
      <el-table-column prop="createTime" label="最近预览" width="200" sortable/>
    </el-table> -->
  </div>
</template>

<script setup lang="ts">
import {
  ref, unref,
  reactive,
  toRefs,
  watch,
  onMounted,
  nextTick,
  computed,
  getCurrentInstance
} from 'vue'
import { useRouter } from "vue-router"
import fileRPng from '@/views/common/fileRPng.vue'
const router = useRouter();
import { knowledgeFrequently, getComUsage } from '@/api/knowledge'
import { require } from '@/utils/require'
import ColorThief from 'colorthief'
const colorThief = new ColorThief()
import type { checkedKnow } from '@/types/common'
import useUserInfoStore from '@/store/userInfo';
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const userStore = useUserInfoStore()
const emit = defineEmits([""])
const props = defineProps({})
const { proxy } = getCurrentInstance()

const { } = toRefs(
  reactive({
    //定义数组和对象

  })
);
const knowList = ref([])
const isMounted = ref(false)
const popVisible = ref(false)
const listsLoading = ref(false)
const showType = ref('map')
const currentActive = ref('view')
const uploadFileLimit = window.pluginConfig.uploadFileLimit || 5
const typeList = reactive([
  {
    label: 'message.index.recentPreViews',
    value: 'view'
  }, {
    label: 'message.index.recentlyEdit',
    value: "edit"
  }
])
const fileType = ref('')
const listScrollBar = ref()
const fileTypeList = reactive([
  {
    label: 'message.typeMenu.allDoc',
    value: ''
  }, {
    label: 'message.typeMenu.textDoc',
    value: 'document_html'
  }, {
    label: 'message.typeMenu.formDoc',
    value: 'document_xlsx'
  }, {
    label: 'message.typeMenu.mindMapDoc',
    value: 'document_map'
  }, {
    label: 'message.typeMenu.processDoc',
    value: 'document_flow'
  }, {
    label: 'message.typeMenu.markDown',
    value: 'md'
  }, {
    label: 'message.typeMenu.xmind',
    value: 'xmind'
  }, {
    label: 'message.typeMenu.word',
    value: 'office_doc'
  }, {
    label: 'message.typeMenu.pdf',
    value: 'office_pdf'
  }, {
    label: 'message.typeMenu.excel',
    value: 'office_xlsx'
  }, {
    label: 'message.typeMenu.ppt',
    value: 'office_ppt'
  }
])
const lists = ref([])
const nameSort = ref('desc')
// 切换租户
// import useUserInfoStore from '@/store/userInfo';
// const userStore = useUserInfoStore()
// const changeTenantsList = ref([])
// changeTenantsList.value = userStore.userInfo.tenants.filter(ti=>{
//   return ti.id != userStore.userInfo.tenantId
// })

// proxy.$loginForm({
//   hasModal: true,
//   successClose: false,
//   switchTenant: true,
//   closeable:false,
//   switchList: changeTenantsList.value,
//   afterLogin:(res)=>{

//   }
// })
onMounted(() => {
  isMounted.value = true
  getCommonList()
  getComUsageFun()
})
function createdKnowledge() {
  proxy.$eventBus.$emit("createKnow")
}
function changeSort(prop) {
  let sort = ''
  nameSort.value = nameSort.value == 'desc' ? 'asc' : 'desc'
  sort = nameSort.value
  listSort(prop, sort)
}
function listSort(prop, sort) {
  lists.value.sort((a, b) => {
    if (sort == 'desc') {
      if (a[prop] > b[prop]) {
        return -1
      } else {
        return 1
      }
    } else {
      if (a[prop] < b[prop]) {
        return -1
      } else {
        return 1
      }
    }
  })
}
function getComUsageFun() {
  if (userStore.access_token) {
    getComUsage().then(res => {
      if (res.data.code == 0) {
        knowList.value = res.data.data.filter((item, index) => item)
      }
    })
  }
}
function imgLoadSuccess(event) {
  let imgDom = document.getElementById(`file-icon-${event}`)
  let arr = colorThief.getColor(imgDom)
  imgDom.style.boxShadow = `0px 6px 15px -1px rgba(${arr.join(',')},0.4)`
}
function getCommonList() {
  if (userStore.access_token) {
    listsLoading.value = true
    knowledgeFrequently({
      operationType: currentActive.value == 'view' ? '查看' : '修改',
      type: fileType.value
    }).then(res => {
      if (res.data.code == 0) {
        lists.value = res.data.data
        listsLoading.value = false
      }
    }).catch(err => {
      listsLoading.value = false
    })
  }
}
function handleClick(val) {
  fileType.value = val
  getCommonList()
}
function changeViewType(val) {
  if (showType.value != val) {
    showType.value = val
    nameSort.value = 'desc'
    listSort('dcName', nameSort.value)
  }
  listScrollBar.value.update()
}
function typeChange(val) {
  if (currentActive.value != val.value) {
    currentActive.value = val.value
    getCommonList()
  }
}
function rowClick(row, col, event) {
  console.log(row, col, event)
}
function openFile(item: checkedKnow) {
  router.push({
    path: `/knowledge/all/${item.knowledgeId}`,
    query: {
      docId: item.dcLibraryId
    }
  })
}
// 打开文库
function openKnow(item) {
  let openUrl
  if (item.shareRole == 'user') {
    openUrl = `/knowledge/my/${item.id}`
  } else {
    openUrl = `/knowledge/all/${item.id}`
  }
  router.push({
    path: openUrl
  })
}
// function popClick(){
//   popVisible.value = true
// }
// 置顶
function chagneTop(itme) {

}
// 删除知识库
function delKnow(item) {

}
//  下载知识库
function downLoadKnow(item) {

}
// 打开文库设置
function openSet(item) {

}
</script>
<style lang="scss" scoped>
.home-body {
  height: calc(100% - 8px);
  padding: 0px 24px;
  overflow: hidden;

  .dc-name {
    display: flex;
    align-items: center;
    cursor: pointer;

    .file-icon {
      width: 20px;
      min-width: 20px;
      height: 20px;
      margin-right: 16px;
    }
  }

  .home-first-title {
    margin-top: 8px;
  }

  .common-use-box {
    display: flex;
    // grid-template-columns: 184px;
    // grid-auto-flow: column;
    flex-wrap: wrap;
    grid-gap: 26px;
    height: 266px;
    overflow: hidden;
    width: 100%;

    .add-icon {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }

    .common-item {
      width: 184px;
      height: 234px;
      background-color: #f5f6f7;
      margin-top: 16px;
      margin-bottom: 16px;
      border-radius: 6px;
      padding: 12px;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      z-index: 2;
      border: 1px solid transparent;

      .lable {
        position: absolute;
        top: 12px;
        left: 12px;
        font-size: 12px;
        @include SourceHanSansCN-Regular;
        color: #1e6fff;
        background-color: #E8F0FF;
        border-radius: 5px 0px 5px 0px;
        width: 40px;
        text-align: center;
        height: 18px;
        line-height: 18px;
        z-index: 2;
      }

      .user {
        background: #FFE7ED;
        color: #FF194C;
      }

      .register {
        background: #E9F7EC;
        color: #36B452;
      }

      .know-cover {
        width: 160px;
        height: 160px;
        overflow: hidden;
        margin-bottom: 12px;
        position: relative;

        img {
          width: 160px;
          height: 160px;
          border-radius: 5px;
          // transition: all 0.1s;
        }

        .know-set {
          visibility: hidden;
          // transition: all 0.1s;
          position: absolute;
          top: 0px;
          left: 0px;
          display: grid;
          grid-template-columns: 36px 36px;
          // align-items: center;
          justify-content: center;
          padding: 25px 26px;
          // width: 160px;
          // height: 160px;
          grid-column-gap: 32px;
          grid-row-gap: 16px;
          flex-wrap: wrap;

          .know-set-item {
            width: 38px;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #FFFFFF;
            @include SourceHanSansCN-Regular;

            .set-icon {
              height: 20px;
              width: 20px;
              cursor: pointer;
            }
          }
        }
      }

      .know-name {
        font-size: 14px;
        @include SourceHanSansCN-Bold;
        color: #363b4c;
        height: 18px;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .know-desc {
        @include SourceHanSansCN-Regular;
        margin-top: 8px;
        color: #6F7588;
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 146px;
        position: relative;
      }

      &:hover {
        border-color: #1E6FFF;
        // background: #1E6FFF;
        // background: #E4EDFF;
        // .lable{
        //   visibility: hidden;
        // }
        // .know-cover{
        // img{
        //   visibility: hidden;
        // }
        // .know-set{
        //   visibility: visible;
        // }
        // }
        // .know-desc{
        //   color: #fff;
        // }
        // .know-name{
        //   color: #fff;
        // }
      }
    }
  }

  .types-box {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 18px;

    .types-left {
      display: flex;
      align-items: end;
      @include SourceHanSansCN-Regular;

      .type-left {
        color: #575E73;
        font-size: 16px;
        cursor: pointer;
      }

      .type-left+.type-left {
        margin-left: 32px;
      }
    }

    .types-right {
      display: flex;

      .el-dropdown-link {
        font-size: 14px;
        color: #363b4c;
        @include SourceHanSansCN-Regular;
        display: flex;
        align-items: center;
        cursor: pointer;

        .icon {
          width: 16px;
          height: 16px;
        }
      }
    }

    .view-type-box {
      width: 64px;
      height: 30px;
      border-radius: 4px;
      background-color: #f0f1f2;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 16px;

      ::v-deep(span) {
        display: flex;
        align-items: center;
      }

      .icon {
        width: 20px;
        height: 20px;
        border-radius: 2px;
        margin-left: 8px;
        cursor: pointer;

        &:hover {
          background: #eeeff0;
        }
      }

      .active {
        background: #fff !important;
      }
    }
  }

  .file-list-box {
    height: calc(100% - 342px);

    ::v-deep(.el-scrollbar__view) {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .list-item {
      padding: 8px 8px 11px 11px;
      box-sizing: border-box;
      margin-right: 24px;
      margin-bottom: 24px;
      width: 168px;
      height: 168px;
      // background-image: url('../../assets/images/fileItemBox.png');
      // background-repeat: no-repeat
      position: relative;
      filter: drop-shadow(0px 4px 10px rgba(54, 59, 76, 0.08));
      transition: all 0.5s;
      cursor: pointer;

      &:hover {
        top: -5px;
      }

      img {
        width: 168px;
        height: 168px;
        position: absolute;
        top: 8px;
        left: 11px;
        z-index: 0;
      }

      .file-icon {
        position: relative;
        width: 32px;
        height: 32px;
        z-index: 2;
        margin: 24px;
        box-shadow: 0px 6px 15px -1px rgba(46, 202, 129, 0.4);
      }

      .time-name-box {
        margin-top: 12px;
        padding: 0px 0px 0px 24px;
        box-sizing: border-box;
        position: relative;
        width: 100%;
        z-index: 2;

        .time {
          color: #6f7588;
          font-size: 14px;
          @include SourceHanSansCN-Regular;
        }

        .name {
          color: #363B4C;
          font-size: 14px;

          span {
            @include SourceHanSansCN-Bold;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }

    .lists-item {
      display: flex;
      align-items: center;
      height: 52px;
      position: relative;

      .item-check {
        position: absolute;
        left: 6px;
        visibility: hidden;
      }

      .show-item-check {
        visibility: visible;
      }

      .sort-icon {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }

      .item-name {
        min-width: 80px;
        width: calc(100% - 524px);
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 8px;
        box-sizing: border-box;

        span {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .item-author {
        min-width: 80px;
        font-size: 12px;
        color: #6F7588;
        width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 8px;
        box-sizing: border-box;

        span {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .item-time {
        min-width: 80px;
        width: 180px;
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 8px;
        box-sizing: border-box;

        span {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .lists-header {
      height: 33px;
      padding: 0px 24px;
      font-size: 12px;
      color: #363B4C;
      @include SourceHanSansCN-Regular;
      position: relative;

      // border-bottom: 1px solid #eeeff0;
      &::after {
        position: absolute;
        bottom: 0px;
        height: 1px;
        width: calc(100% - 48px);
        background-color: #eeeff0;
        content: '';
      }

      user-select: none !important;

      .item-time {
        color: #363B4C;
      }

      .item-author {
        color: #363B4C;
      }

      &:hover {
        .item-check {
          visibility: visible;
        }
      }
    }

    .lists-items {
      padding: 0px 24px;
      position: relative;
      width: 100%;

      .bottom-line {
        width: 1118px;
        height: 1px;
        background: #EEEFF0;
        position: absolute;
        left: 58px;
        width: calc(100% - 82px);
        bottom: 0px;
      }

      .item-name {
        font-size: 14px;

        .file-icon {
          width: 24px;
          min-width: 20px;
          height: 20px;
          margin-right: 16px;
        }
      }

      .item-time {
        font-size: 12px;
        color: #6F7588;
      }
    }
  }

  .active {
    @include SourceHanSansCN-Bold;
    color: #363B4C !important;
    font-size: 20px !important;
  }
}
</style>
<style lang="scss">
.icon-box {
  width: 16px;
  height: 16px;
  margin-right: 8px;

  .icon {
    width: 16px;
    height: 16px;
  }
}
</style>